<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>查询</button>
    <ul id="list">

    </ul>
    <script src="../js/jquery.js"></script>
    <script>
        $('button').click(function () {
            getNews();
        })

        function getNews(){
            $.ajax({
                url: 'http://api.tianapi.com/esports/index', // 请求接口地址
                data: { // 请求参数
                    key: '4ed65ae069cfb9645f57d4c53fb679ad',
                    num: 5,
                    page : 3
                },
                type: 'get', // 请求方式
                async: true, // 异步请求
                dataType: 'json', // json格式解析返回数据
                success: function (resp) { // 请求成功回调函数
                    if (resp.code == 200) {
                        let news = resp.newslist;
                        news.forEach((item, index) => {
                            // 创建 li 标签 
                            let oLi = $('<li></li>');
                            oLi.html(`${item.title}--${item.description}`);
                            // 追加子元素
                            $('#list').append(oLi);
                        });
                    }
                    else {
                        alert(resp.msg);
                    }
                }
            })
        }
    </script>
</body>

</html>